<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.js"></script>
    <script type="text/javascript" src="fonts/iconfont.js" ></script>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/plug/swiper-3.4.0.jquery.min.js" ></script>
    <script src="js/base.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/index.css" />
    <link href="css/mui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/plug/mescroll-option.css" />
    <link rel="stylesheet" href="css/plug/mescroll.min.css" />
    <link rel="stylesheet" href="css/plug/swiper-3.2.7.min.css" />
    <script type="text/javascript" charset="utf-8">
      	mui.init();
      	document.addEventListener('plusready',function(){
        	plus.navigator.setStatusBarBackground("#006EC3");
            plus.navigator.setStatusBarStyle("light");
;  		},false);
    </script>
</head>
<body>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" data-id="tab1" i="1">
			<svg class="icon zoomIn" aria-hidden="true">
		    	<use xlink:href="#icon-ITshenqing"></use>
			</svg>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" data-id="tab2" i="2">
			<svg class="icon" aria-hidden="true">
		    	<use xlink:href="#icon-lizhijiaojie"></use>
			</svg>
			<span class="mui-tab-label">司法救助</span>
		</a>
		<a class="mui-tab-item" data-id="tab3">
			<svg class="icon" aria-hidden="true">    
		    	<use xlink:href="#icon-diannaoguzhang"></use>
			</svg>
			<span class="mui-tab-label">举报</span>
		</a>
		<a class="mui-tab-item" data-id="tab4">
			<svg class="icon" aria-hidden="true">
		    	<use xlink:href="#icon-nan"></use>
			</svg>
			<span class="mui-tab-label">我</span>
		</a>
	</nav>
</body>
<script type="text/javascript">
//      mui.init({
//          subpages:[{                
//              url:"index-1.html",
//              id:"t",
//              styles:{
//                  top:"0px",
//                  bottom:"0px"
//              }
//          }]
//      })
        mui.init()
        mui.plusReady(function() {
            var subInfos = [{
                url: 'index-page/index-1.html',
                id: 'tab1'
            }, {
                url: 'index-page/index-2.html',
                id: 'tab2',
            }, {
                url: 'index-page/index-3.html',
                id: 'tab3'
            }, {
                url: 'index-page/index-4.html',
                id: 'tab4'
            }];
            var subStyles = {
                top: '100px',
                bottom: '57px'
            };

            // 根据id查询子页面的信息
            var getSubInfoById = function(infoList, id) {
                var result = null;
                for(var i = 0, len = infoList.length; i < len; i++) {
                    var _info = infoList[i];
                    if(_info.id === id) {
                        result = _info;
                        break;
                    }
                }
                return result;
            };

            var mainWv = plus.webview.currentWebview();
            var activeTab = '';

//          // 默认只加载首页webview
            var homeWv = plus.webview.create(subInfos[0].url, subInfos[0].id, subStyles);
            mainWv.append(homeWv);
            activeTab = subInfos[0].id;

            // 点击切换，动态创建其它webview；
            mui('.mui-bar-tab').on('tap', 'a.mui-tab-item', function(e) {
                var _self = this;
                var targetTab = _self.getAttribute('data-id');
                if(targetTab === activeTab) {
                    return;
                }
                var _subWv = plus.webview.getWebviewById(targetTab);
                // 若webview不存在，则创建；
                if(!_subWv) {
                    var _subInfo = getSubInfoById(subInfos, targetTab);
                    _subWv = plus.webview.create(_subInfo.url, _subInfo.id, subStyles);
                    mainWv.append(_subWv);
                }
                // 隐藏之前的webview
                plus.webview.getWebviewById(activeTab).hide('none');
                activeTab = targetTab;
            });
        });
    </script>
</html>